<template>
  <div>
    <div class="fixHead">
      <div class="title">
        <span class="iconfont icon-jiantou" @click="$router.go(-1)"></span>
        <span class="icon-home" @click="$router.push('/')"></span>
        <h1>编辑名片</h1>
        <span class="rightBtn" style="color: #deaa8a;">确认</span>
      </div>
      <div style="height: 0.88rem;"></div>
    </div>
    <div class="formlist">
      <div class="item " style="align-items: center;">
        <div class="left">
          头像<img src="../../../assets/images/mkf/must.png" />
        </div>
        <div class="right upload">
          <div class="block">
            <div class="no">
              <img src="../../../assets/images/mkf/add.png" />
            </div>
            <!-- 已选择 -->
            <!-- <img class="yes" src="../../../assets/images/adver.jpg" /> -->
          </div>
        </div>
      </div>
      <div class="item ">
        <div class="left">
          称呼<img src="../../../assets/images/mkf/must.png" />
        </div>
        <div class="right">
          <input type="text" placeholder="请输入中英文称呼" />
        </div>
      </div>
      <div class="item " style="padding-top: 0.4rem;">
        <div class="left" style="line-height: 0.6rem;">
          头衔(1-3)<img src="../../../assets/images/mkf/must.png" />
        </div>
        <div class="right">
          <!-- 每一条30个字 -->
          <div class="tag" @click="inputTitle('阿里爸爸CEO')">
            <span class="txt"
              >阿里爸爸CEO阿里爸爸CEO阿里爸爸CEO阿里爸爸CEO阿里爸爸CEO阿里爸爸CEO</span
            ><span class="del" @click.stop="del">×</span>
          </div>
          <div class="tag" @click="inputTitle('')">
            <img src="../../../assets/images/mkf/add.png" />
          </div>
        </div>
      </div>
      <div class="item noBorder">
        <div class="left">个人简介</div>
        <div class="right">
          <input type="text" placeholder="请输入个人简介,或座右铭" />
        </div>
      </div>
    </div>
    <div class="tip">联系方式，至少选填一项</div>
    <div class="formlist">
      <div class="item">
        <div class="left">手机/电话</div>
        <div class="right">
          <input type="text" placeholder="请输入" />
        </div>
      </div>
      <div class="item">
        <div class="left">邮箱</div>
        <div class="right">
          <input type="text" placeholder="请输入" />
        </div>
      </div>
      <div class="item noBorder">
        <div class="left">微信二维码</div>
        <div class="right upload2">
          <div class="block">
            <div class="no">
              <img src="../../../assets/images/mkf/add.png" />
            </div>
            <!-- 已选择 -->
            <!-- <img class="yes" src="../../../assets/images/adver.jpg" /> -->
          </div>
        </div>
      </div>
    </div>
    <div class="checkBlock">
      <div class="left" @click="isCheck = !isCheck">
        <span class="no" v-if="!isCheck"></span>
        <img class="yes" v-else src="../../../assets/images/mkf/checked.png" />
      </div>
      <p class="right">设为默认名片</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  props: {},
  data: function() {
    return {
      isCheck: false
    };
  },
  mounted: function() {},
  methods: {
    del() {
      console.log("删除");
    },
    inputTitle(txt) {
      this.$router.push({
        path: "/card/input",
        query: {
          txt: txt
        }
      });
    }
  }
};
</script>

<style scoped>
.formlist {
  background-color: #2a2631;
  width: 100%;
  margin: 0 auto;
  padding: 0 0.2rem;
}

.formlist .item .left {
  width: 1.62rem;
}

.formlist .item .right {
  width: 5.48rem;
}

.formlist .item.noBorder {
  border: none;
}

.formlist .item .right.upload .block {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: none;
}

.formlist .item .right.upload .block .no img,
.formlist .item .right .tag img {
  width: 0.32rem;
  height: 0.32rem;
  display: block;
}

.formlist .item .right .tag {
  width: 5.48rem;
  height: 0.6rem;
  background-color: #32303a;
  border-radius: 0.06rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.28rem;
  color: #ffffff;
  margin-bottom: 0.2rem;
  position: relative;
  padding: 0 0.4rem;
  overflow: hidden;
  white-space: nowrap;
}

.formlist .item .right .tag .txt {
  display: block;
  width: 100%;
  padding: 0 0.3rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.formlist .item .right .tag .del {
  display: block;
  width: 0.58rem;
  height: 0.58rem;
  /* background-color: rgba(255,255,255,0.1); */
  border-radius: 50%;
  text-align: center;
  font-size: 0.42rem;
  line-height: 0.58rem;
  position: absolute;
  top: -0.1rem;
  right: -0.1rem;
  color: rgba(255, 255, 255, 0.7);
}

.tip {
  height: 0.9rem;
  font-size: 0.28rem;
  line-height: 0.38rem;
  color: #666666;
  padding: 0.34rem 0.2rem 0;
}

.formlist .item .right.upload2 {
  justify-content: flex-start;
  align-items: flex-start;
}

.formlist .item .right.upload2 .block {
  width: 2rem;
  height: 2rem;
  background-color: rgba(50, 48, 58, 1);
  border-radius: 0.1rem;
  overflow: hidden;
  margin: 0.16rem 0 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.formlist .item .right.upload2 .block .no {
  display: flex;
  align-items: center;
  justify-content: center;
}

.formlist .item .right.upload2 .block .no img {
  width: 0.4rem;
  height: 0.4rem;
  display: block;
}

.checkBlock {
  padding: 0.3rem 0.2rem 0.54rem;
  display: flex;
  align-items: center;
}

.checkBlock .left {
  width: 0.4rem;
  height: 0.4rem;
  margin-right: 0.21rem;
}

.checkBlock .left .no {
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  background-color: #2a2631;
  border: solid 1px #999999;
  border-radius: 50%;
}

.checkBlock .left .yes {
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
}

.checkBlock .right {
  font-size: 0.28rem;
  color: #999999;
}
</style>
